<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示隐藏文本框内容</title>
		<style type="text/css">
			input {
				color: #999;
			}
		</style>
	</head>
	<body>
		<input type="text" value="手机">
		<script type="text/javascript">
			var text = document.querySelector('input');
			// 注册事件 获得焦点事件】
			text.onfocus = function() {
				// console.log('得到焦点');
				if (this.value === '手机') {
					this.value = '';
				}
				// 获取焦点输入文字加黑
				this.style.color = '#333';
			}
			// 注册事件 失去焦点事件
			text.onblur = function() {
				// console.log('失去焦点');
				if (this.value == '') {
					this.value = '手机';
				}
				// 失去焦点输入文字恢复
				this.style.color = '#999';
			}
		</script>
	</body>
</html>
